<template>
  <header id="nav">
    <!--BlogName-->
    <div class="container">
      <div class="title left">
        <router-link class="blog-title" to="/profile">后台管理</router-link>
      </div>
      <div class="nav right">
        <ul class="nav-main">
          <li class="anchor" style></li>
          <li v-for="(item, index) in titles" :key="index" class="main-item">
            <router-link :to="item.to">
              <Icon :type="item.icon" />
              <span> {{item.title}}</span>
            </router-link>
          </li>
        </ul>
      </div>
    </div>
  </header>
</template>

<script>
import { initAnchor } from "utils/header"

export default {
  name: 'ProfileHeader',
  components: {},
  mounted() {
    //获取页面元素
    let myElement = document.querySelector('header')
    let headroom = new Headroom(myElement, {
      tolerance: 5,
      offset: 80,
      classes: {
        initial: 'animated',
        pinned: 'slideInDown',
        unpinned: 'slideOutUp'
      }
    })
    headroom.init()
    initAnchor()
  },
  data() {
    return { 
      titles: [
        { to: "/profile/blog/manage", title: "博客", icon: "ios-cog" },
        { to: "/profile/type/manage", title: "分类", icon: "ios-bookmarks" },
        { to: "/profile/tag/manage", title: "标签", icon: "md-pricetags" },
        { to: "/profile/carousel/manage", title: "轮播图", icon: "ios-film" },
        { to: "/profile/link/manage", title: "友链", icon: "md-link" }
      ]
    }
  },
}
</script>
<style lang='scss' scoped>
header {
  position: fixed;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 58px;
  border: none;
  font-size: 17px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
  .container {
    width: calc(100% - 80px);
    max-width: 1680px;
    height: 100%;
    margin: 0 auto;
    .title {
      height: 100%;
      line-height: 58px;
      width: 20%;
      .blog-title {
        font-size: 1.4rem;
        font-weight: bold;
        cursor: pointer;
        color: #475669;
        &:hover { color: #28cfcf; }
      }
    }
    .nav {
      position: relative;
      height: 100%;
      line-height: 58px;
      width: 80%;
      .nav-main {
        position: relative;
        padding: 0;
        text-align: right;
        .main-item {
          list-style-type: none;
          display: inline-block;
          cursor: pointer;
          &:hover{
            a { color: #28cfcf; }
          }
          a {
            display: block;
            font-size: 1rem;
            padding: 0 12px;
            color: #475669;
            line-height: 58px;
          } 
          .router-link-exact-active {
            color: #28cfcf;
          }
        }
        .anchor {
          list-style-type: none;
          position: absolute;
          opacity: 1;
          transition: cubic-bezier(.3, 1.5, .5, 1) .7s;
          &:before {
            content: '';
            position: absolute;
            display: block;
            top: 57px;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(#58f0f0 30%, #28cfcf 70%);
            border-radius: 3px;
            box-shadow: 0 3px 4px  rgba(40, 207, 207, 0.6) ;
          }
        }
      }
    }
  }
}
</style>